<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录</title>
    <script src="/static/js/jquery-1.8.1.min.js"></script>
    <link rel="stylesheet" href="/static/css/login.css">
    <!-- 作者QQ:951252660 -->
</head>

<body>
    <div class="login">
        <div class="center">
            <h1>Login</h1>
            <div class="inputLi">
                <strong>账户</strong>
                <input type="text" placeholder="请输入" name="username">
            </div>
            <div class="inputLi">
                <strong>密码</strong>
                <input type="text" placeholder="请输入" name="password">
            </div>
            <div class="inputLi">
                <strong>验证码</strong>
                <input type="text" placeholder="请输入" name="code">
                <div>{:captcha_img()}</div>
            </div>
            <div class="inputLi">
                <button>登录</button>
            </div>
            <p class="tip">关注17素材网</p>
        </div>
    </div>
</body>

<!--ajax登录-->
<script>
    $(function () {
        $('button').click(function () {
            // 获取用户名 密码
            let  username = $("input[name='username']").val();
            let  password = $("input[name='password']").val();
            let  code = $("input[name='code']").val();
            if (username == '') {
                alert('用户名不能为空');return false;
            }
            if (password == '') {
                alert("密码不能为空");return  false;
            }
            // 发送请求
            $.ajax({
                url:"/shop/doLogin",// 请求的地址
                data:{username:username,password:password,code:code},// 请求的参数
                dataType:'json',// 响应的数据格式
                type:"POST",//请求的方式
                success:function (response) {
                    console.log(response);
                    if (response.code == 200) {
                        location.href='/shop/goodsList';
                    }
                    alert(response.msg);
                }
            });
        })
    })
</script>

</html>